import loading_bg from '@/assets/loading_bg.jpeg'
import { useTips } from '@/plugins/tips'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: 'waiting',
    },
    content: {
      type: String,
      default: 'description',
    },
  },
  setup(props) {
    const tips = useTips() //提示语句数据
    const tip = ref(tips[Math.floor(Math.random() * tips.length)]) //简单随机选出语句

    return () => (
      <div>
        {props.visible && (
          <div
            class='fixed top-0 left-0 flex flex-col items-center justify-center w-screen h-screen bg-opacity-40 z-90'
            style={`background:url(${loading_bg});background-size:100% 100%`}
          >
            <div
              class='flex flex-col items-center justify-center p-4 space-y-4 rounded-md shadow-md min-h-50 w-50'
              style={`background-color:rgba(72,118,253,.6)`}
            >
              <p class='w-full min-h-10 overflow-hidden text-xl text-center text-white'>
                {props.title}
              </p>

              <i class='i-eos-icons:bubble-loading w-14 h-14 block text-white'></i>
              <p class='w-full overflow-hidden text-center text-white text-md'>
                {props.content}
              </p>
            </div>
            <div class='flex justify-center w-screen mt-25'>
              <div class='flex items-center justify-center w-2/3 rounded-md'>
                <p class='flex items-center justify-center h-full text-3xl font-bold text-center text-gray-800'>
                  {tip.value}
                </p>
              </div>
            </div>
          </div>
        )}
      </div>
    )
  },
})
